<template>
    <Card :top="'5px'" :left="'5px'" @dragEnteredRange="handleDragEnteredRange"></Card>
    <div class="purchased-box">
        <div class="purchased-title">已购买的产品</div>
        <el-button style="position: absolute; right: 20px; top: 20px" type="info" @click="handleQuit">返回</el-button>
        <div v-show="isUpgrade" ref="container2Ref" class="price-box">
            <div class="item">将有奖卡片球拖入此，进行价格抵消</div>
            <div class="item">
                <div>升级价格</div>
                <div style="font-size: 36px;color: #b21b1b">{{ price }}</div>
            </div>
        </div>
        <div class="purchased-content" :class="{sub: isUpgrade}">
            <div v-show="purchasedList.length === 0" class="purchased-null" @click="openFrom">
                这里空空如也,赶快去选购产品吧!
            </div>
            <el-collapse class="purchased-item" v-model="activeName" accordion
                         v-for="item in purchasedList"
                         :key="item.id" @change="handleUpgrade(item, 1)">
                <el-collapse-item style="padding: 10px;"
                                  :title="item.baseVO.area + '---' + item.exampleVO.specification" :name="item.id">
                    <div v-if="!isUpgrade">
                        <el-button style="position: absolute; right: 90px; top: 20px" type="primary"
                                   @click="handleUpgrade(item, 2)">升级
                        </el-button>
                        <div class="info-box">
                            <el-descriptions title="基本信息" direction="vertical" :column="9" size="default" border>
                                <el-descriptions-item label="付费类型">
                                    <el-tag size="small" type="danger" v-if="item.baseVO.type == 1">包年包月</el-tag>
                                    <el-tag size="small" type="danger" v-else-if="item.baseVO.type == 2">按量付费
                                    </el-tag>
                                    <el-tag size="small" type="danger" v-else-if="item.baseVO.type == 3">抢占式实例
                                    </el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="地域">{{ item.baseVO.area }}</el-descriptions-item>
                                <el-descriptions-item label="网络" :span="2">
                                    <el-tag size="small" type="danger" v-if="item.baseVO.network == 1">默认专有网络
                                    </el-tag>
                                    <el-tag size="small" type="danger" v-else-if="item.baseVO.network == 2">其他网络
                                    </el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="可用区">
                                    <el-tag size="small" type="danger" v-if="item.baseVO.availableArea == 1">
                                        默认可用区
                                    </el-tag>
                                    <el-tag size="small" type="danger" v-else-if="item.baseVO.availableArea == 2">
                                        其他可用区
                                    </el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="实例数量">{{ item.baseVO.number }}</el-descriptions-item>
                                <el-descriptions-item label="时长">{{ item.baseVO.duration }}</el-descriptions-item>
                                <el-descriptions-item label="续费">
                                    <el-tag v-if="item.baseVO.isRenewal == 0" type="info">否</el-tag>
                                    <el-tag v-if="item.baseVO.isRenewal == 1" type="danger">是</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="购入价格">
                                    <span style="color: #fd7c11;">{{ item.baseVO.price }}</span>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <div class="info-box">
                            <el-descriptions title="基本信息" direction="vertical" :column="7" size="default" border>
                                <el-descriptions-item label="规格">{{ item.exampleVO.specification }}
                                </el-descriptions-item>
                                <el-descriptions-item label="CPU数量">{{ item.exampleVO.cpu }}</el-descriptions-item>
                                <el-descriptions-item label="内存(GIB)">{{ item.exampleVO.memory }}
                                </el-descriptions-item>
                                <el-descriptions-item label="架构-分类" :span="2">
                                    <el-tag v-if="item.exampleVO.architecture == 1" type="success">X86 计算-本地 SSD
                                    </el-tag>
                                    <el-tag v-if="item.exampleVO.architecture == 2" type="danger">ARM计算-大数据型
                                    </el-tag>
                                    <el-tag v-if="item.exampleVO.architecture == 3" type="info">GPU云服务器-共享型
                                    </el-tag>
                                    <el-tag v-if="item.exampleVO.architecture == 4" type="warning">
                                        弹性裸金属服务器-内存型
                                    </el-tag>
                                    <el-tag v-if="item.exampleVO.architecture == 5" type="danger">X86 计算-高主频型
                                    </el-tag>
                                    <el-tag v-if="item.exampleVO.architecture == 6" type="success">X86 计算-通用型
                                    </el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="处理器">{{ item.exampleVO.processorType }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <div class="info-box">
                            <el-descriptions title="镜像" direction="vertical" :column="7" size="default" border>
                                <el-descriptions-item label="镜像名称">{{ item.imageVO.name }}</el-descriptions-item>
                                <el-descriptions-item label="镜像版本">{{ item.imageVO.imageVersion }}
                                </el-descriptions-item>
                                <el-descriptions-item label="是否安全加固">
                                    <el-tag v-if="item.imageVO.isSecurity == 1" type="success">是</el-tag>
                                    <el-tag v-if="item.imageVO.isSecurity == 2" type="danger">否</el-tag>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <div class="info-box">
                            <el-descriptions title="带宽和安全组" direction="vertical" :column="7" size="default"
                                             border>
                                <el-descriptions-item label="虚拟网络IP">{{ item.bandwidthGroupsVO.ip }}
                                </el-descriptions-item>
                                <el-descriptions-item label="带宽计费模式">
                                    <el-tag v-if="item.imageVO.isSecurity == 1" type="success">按固定带宽</el-tag>
                                    <el-tag v-if="item.imageVO.isSecurity == 2" type="danger">按使用流量</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="带宽值(M)">{{ item.bandwidthGroupsVO.bandwidth }}
                                </el-descriptions-item>
                                <el-descriptions-item label="安全组名称">{{ item.bandwidthGroupsVO.groupingName }}
                                </el-descriptions-item>
                                <el-descriptions-item label="安全组类型">
                                    <el-tag v-if="item.imageVO.isSecurity == 1" type="success">普通</el-tag>
                                    <el-tag v-if="item.imageVO.isSecurity == 2" type="danger">企业</el-tag>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <div class="info-box">
                            <el-descriptions title="管理" direction="vertical" :column="7" size="default" border>
                                <el-descriptions-item label="登录名">{{ item.managementVO.name }}</el-descriptions-item>
                                <el-descriptions-item label="密码">{{ item.managementVO.passwd }}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <div class="info-box">
                            <div v-if="item.storages.length > 1">
                                <el-tabs class="demo-tabs" v-model="activeName2">
                                    <el-tab-pane label="系统盘" name="first">
                                        <el-descriptions title="系统盘" direction="vertical" :column="7" size="default"
                                                         border>
                                            <el-descriptions-item label="存储类型">
                                                <el-tag v-if="item.storages[0].type == 1" type="success">ESSD云盘
                                                </el-tag>
                                                <el-tag v-if="item.storages[0].type == 2" type="danger">高效云盘
                                                </el-tag>
                                                <el-tag v-if="item.storages[0].type == 3" type="info">SSD云盘</el-tag>
                                                <el-tag v-if="item.storages[0].type == 4" type="warning">ESSDAutoPL
                                                </el-tag>
                                            </el-descriptions-item>
                                            <el-descriptions-item label="储存容量(GB)">
                                                {{ item.storages[0].capacity }}
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </el-tab-pane>
                                    <el-tab-pane label="数据盘" name="second">
                                        <el-descriptions title="数据盘" direction="vertical" :column="7" size="default"
                                                         border>
                                            <el-descriptions-item label="存储类型">
                                                <el-tag v-if="item.storages[1].type == 1" type="success">ESSD云盘
                                                </el-tag>
                                                <el-tag v-if="item.storages[1].type == 2" type="danger">高效云盘
                                                </el-tag>
                                                <el-tag v-if="item.storages[1].type == 3" type="info">SSD云盘</el-tag>
                                                <el-tag v-if="item.storages[1].type == 4" type="warning">ESSDAutoPL
                                                </el-tag>
                                            </el-descriptions-item>
                                            <el-descriptions-item label="储存容量(GB)">
                                                {{ item.storages[0].capacity }}
                                            </el-descriptions-item>
                                        </el-descriptions>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <div v-else>
                                <el-descriptions title="系统盘" direction="vertical" :column="7" size="default" border>
                                    <el-descriptions-item label="存储类型">
                                        <el-tag v-if="item.storages[0].type == 1" type="success">ESSD云盘</el-tag>
                                        <el-tag v-if="item.storages[0].type == 2" type="danger">高效云盘</el-tag>
                                        <el-tag v-if="item.storages[0].type == 3" type="info">SSD云盘</el-tag>
                                        <el-tag v-if="item.storages[0].type == 4" type="warning">ESSDAutoPL</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="储存容量(GB)">{{ item.storages[0].capacity }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="isUpgrade" style="margin-top: 30px">
                        <el-button v-show="price >0" style="position: absolute; right: 170px; top: 20px" type="danger"
                                   @click="upgrade(item)">确认升级
                        </el-button>
                        <el-button style="position: absolute; right: 90px; top: 20px" type="primary"
                                   @click="isUpgrade = false;">取消
                        </el-button>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="CPU数" prop="name">
                                    <el-input-number :min="minNum.cpu" v-model="item.exampleVO.cpu"
                                                     :step="item.exampleVO.cpu > 1 ? item.exampleVO.cpu : 1"
                                                     :max="8" @change="changePrice(item)"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="内存值(G)" prop="name">
                                    <el-input-number :min="minNum.memory" v-model="item.exampleVO.memory"
                                                     :step="item.exampleVO.memory"
                                                     :max="32" @change="changePrice(item)"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="带宽值(M)" prop="name">
                                    <el-input-number v-model="item.bandwidthGroupsVO.bandwidth"
                                                     @change="changePrice(item)" :min="minNum.bandwidth" :max="10"
                                                     :step="item.bandwidthGroupsVO.bandwidth > 1 ? 2 : 1"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="时长(月)" prop="name">
                                    <el-input-number :min="minNum.duration" v-model="item.baseVO.duration" :step="1"
                                                     :max="12" @change="changePrice(item)"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="系统存储(G)" prop="name">
                                    <el-input-number v-model="item.storages[0].capacity"
                                                     :min="minNum.sys" :max="256" :step="10"
                                                     @change="changePrice(item)"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item v-if="item.storages.length > 1" label="数据存储(G)" prop="name">
                                    <el-input-number v-model="item.storages[1].capacity"
                                                     :min="minNum.data" :max="256" :step="10"
                                                     @change="changePrice(item)"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref, toRefs} from "vue";
import {getPurchasedInfo} from "@/api/correlation";
import {PurchasedInfo} from "@/api/correlation/types";
import router from "@/router";
import {CardForm} from "@/api/card/types";
import {updateCard} from "@/api/card";
import useStore from "@/store";
import {updateBase} from "@/api/base";
import {updateGroups} from "@/api/bandwidthgroups";
import {updateExample} from "@/api/example";
import {messageConfirm, notifySuccess} from "@/utils/modal";

const purchasedList = ref([] as PurchasedInfo[]);
const container2Ref = ref<HTMLElement | null>(null);

const {user} = useStore();

const data = reactive({
    activeName: 1,
    activeName2: 'first',
    isUpgrade: false,
    price: 0,
    minNum: {
        cpu: 1,
        memory: 2,
        duration: 1,
        bandwidth: 1,
        sys: 60,
        data: 0,
    },
    cardForm: {
        id: 0,
        price: 0
    } as CardForm,
    updateStatus: true,
});

const {
    activeName,
    activeName2,
    isUpgrade,
    price,
    minNum,
    cardForm,
    updateStatus,
} = toRefs(data);

const openFrom = () => {
    router.push({path: "/form"});
}

const handleQuit = () => {
    router.push({path: "/"});
}

const tmp4Math = (num: number) => {
    // cpu占用价格
    switch (num) {
        case 1:
            return 10;
        case 2:
            return 40;
        case 4:
            return 200;
        case 8:
            return 1000;
        default:
            return 0
    }
}
const tmp5Math = (num: number) => {
    // 内存占用价格
    switch (num) {
        case 2:
            return 20;
        case 4:
            return 120;
        case 8:
            return 400;
        case 16:
            return 800;
        case 32:
            return 2000;
        default:
            return 0
    }
}

/**
 * 计算升级价格
 */
const changePrice = (item: PurchasedInfo) => {
    // 带宽 价格
    let tmp = 20;
    if (item.bandwidthGroupsVO.groupingType == 2) {
        // 安全模式带宽价格 * 1.5
        tmp = 20 * 1.5;
    }
    // 原有配置的一个虚拟机价格，不考虑品牌差价
    let tmpOnePrice = tmp4Math(minNum.value.cpu) + tmp5Math(minNum.value.memory) +
        minNum.value.bandwidth * tmp + minNum.value.sys + minNum.value.data;
    // 增加配置后一个虚拟机的价格
    let dataTmp = item.storages.length > 1 ? item.storages[1].capacity : 0;
    let tmpAddPrice = tmp4Math(item.exampleVO.cpu) + tmp5Math(item.exampleVO.memory) +
        item.bandwidthGroupsVO.bandwidth * tmp + item.storages[0].capacity + dataTmp;
    if (item.baseVO.duration - minNum.value.duration > 0) {
        // 增加时长
        price.value = minNum.value.duration * (tmpAddPrice - tmpOnePrice) +
            (item.baseVO.duration - minNum.value.duration) * tmpAddPrice;
    } else {
        price.value = minNum.value.duration * (tmpAddPrice - tmpOnePrice);
    }
}

const handleUpgrade = (item: PurchasedInfo, type: number) => {
    minNum.value.cpu = item.exampleVO.cpu;
    minNum.value.memory = item.exampleVO.memory;
    minNum.value.bandwidth = item.bandwidthGroupsVO.bandwidth;
    minNum.value.duration = item.baseVO.duration;
    minNum.value.sys = item.storages[0].capacity;
    minNum.value.data = item.storages.length > 1 ? item.storages[1].capacity : 0;
    if (type === 1) {
        // 只是维持最小数状态
        return;
    } else {
        isUpgrade.value = true;
    }
}

const getInfo = () => {
    getPurchasedInfo().then(({data}) => {
        if (data.flag) {
            purchasedList.value = data.data;
        }
    });
}

const upgrade = (item: PurchasedInfo) => {
    item.baseVO.price = price.value;
    updateBase(item.baseVO).then(({data}) => {
        if (!data.flag) {
            updateStatus.value = false;
        }
    });
    updateGroups(item.bandwidthGroupsVO).then(({data}) => {
        if (!data.flag) {
            updateStatus.value = false;
        }
    });
    updateExample(item.exampleVO).then(({data}) => {
        if (!data.flag) {
            updateStatus.value = false;
        }
    });
    if (updateStatus.value) {
        updateCardPrice(cardForm.value);
        isUpgrade.value = false;
        notifySuccess("升级成功！");
        getInfo();
        price.value = 0;
    } else {
        messageConfirm("升级失败，请稍后再试！");
    }
}

const updateCardPrice = (card: CardForm) => {
    updateCard(card).then(({data}) => {
        if (data.flag) {
            user.setCardList();
        }
    })
}

/**
 * 拖动价格改变
 */
const handleDragEnteredRange = (x: number, y: number, card: CardForm) => {
    if (price.value === 0 || price.value === 1) {
        return;
    }
    const container = container2Ref.value;
    if (container) {
        const containerRect = container.getBoundingClientRect();
        if (x >= containerRect.left && x <= containerRect.right &&
            y >= containerRect.top && y <= containerRect.bottom) {
            if (price.value >= card.price + 1) {
                price.value -= card.price;
                card.price = 0;
            } else {
                card.price -= price.value;
                // 至少需要1元才能升级
                price.value = 1;
            }
            cardForm.value = card;
            user.cardList.forEach((item) => {
                if (item.id == card.id) {
                    item.price = card.price;
                    return;
                }
            });
        }
    }
}

onMounted(() => {
    getInfo();
})
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.purchased-box {
  width: 100%;
  height: 100vh;

  .purchased-title {
    color: #000000;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 20px;
  }

  .price-box {
    width: 13%;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    position: absolute;
    right: 20px;
    top: 20vh;

    .item {
      height: 120px;
      background: rgba(250, 120, 20, .5);
      border-radius: 10px;
      padding: 10px;
      color: #b21b1b;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      &:hover {
        background: rgba(250, 120, 20, .8);
      }
    }
  }

  .purchased-content {
    width: 100%;
    min-height: 80vh;
    transition: 0.75s;

    .purchased-null {
      text-align: center;

      &:hover {
        cursor: pointer;
        color: rgba(250, 120, 20, .5);
      }
    }

    .purchased-item {
      position: relative;
      width: 80%;
      margin: 0 auto;
      border-radius: 3px;
      box-shadow: 0 0 10px 5px #fd7c11;
      padding: 0 15px;

      .info-box {
        width: 100%;
        border: rgba(250, 120, 20, .3) solid 1px;
        border-radius: 5px;
        margin: 10px 0;
        padding: 10px;

        &:hover {
          box-shadow: 0 0 10px rgba(250, 120, 20, .5);
        }

        .info-title {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }

  .purchased-content.sub {
    width: 90%;
  }

  @media (max-width: 800px) {
    .purchased-content.sub {
      width: 100%;
    }

    .price-box {
      display: none;
    }
  }
}
</style>